import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-chart-heatmap',
  templateUrl: './chart-heatmap.component.html',
  styleUrls: ['./chart-heatmap.component.css']
})
export class ChartHeatmapComponent implements OnInit {

  constructor() { }
  public chartOptions
  ngOnInit() {
  	let Highcharts  = (<any>window)['Highcharts'];
  	this.chartOptions = {
      title: {
        // text: '机组运行工况分布图'
        text: ''
      },
      xAxis: {
        title: {
          text: '机组功率P'
        },
        labels:{
          //formatter:function(){return this.value+"%";},
          autoRotation: false,
          style: {
            "fontSize": "8px"
          }
        },
        tickInterval:5,
        min:0,max:110,
        gridLineColor:"#2B9CFF",
        gridLineWidth:"0.5",
        gridLineDashStyle:"LongDash",
        // startOnTick: true,
        // endOnTick: true,
        plotLines:[{
          color:"green",
          dashStyle:'LongDashDotDot',
          value:100,
          width:1,
          label:{
            text:'(P额定)',
            align:'center',
            y:292,
            rotation:0,
            style: {
              "fontSize": "8px"
            }
          }
        }]//标志线
      },
      yAxis: {
        gridLineColor:"#2B9CFF",
        gridLineWidth:"0.5",
        gridLineDashStyle:"LongDash",//网格线部分
        title: {
          text: '工作水头H'
        },
        plotLines:[{
          color:"green",
          dashStyle:'LongDashDotDot',
          value:70,
          width:1,
          label:{
            text:'(H额定)',
            align:'left',
            x:-74,
            style: {
              "fontSize": "8px"
            }
          }
        }],//标志线
        labels:{ formatter:function(){return this.value+"%"},
          style: {
            "fontSize": "8px"
          }
        },
        min:0,max:110,
        tickInterval:5
      },
      colorAxis: {
        min: 0,
        minColor: '#FFFFFF',
        maxColor: Highcharts.getOptions().colors[0]
      },
      // legend: {
      //   layout: 'vertical',
      //   align: 'right',
      //   verticalAlign: 'middle'
      // },
      series: [
      {
        name: '',
        type:'heatmap',
        borderWidth: 0,
        colsize:5,
        rowsize:5,
        data: [[72.5,72.5,30],[72.5,77.5,40],[77.5,77.5,60],
        [82.5,82.5,40],[87.5,87.5,30],[82.5,87.5,100],[87.5,82.5,100]],
        dataLabels: {
          enabled: false,
          color: '#000000'
        }
      },
      {
        name: '机组振动区',
        type: 'line',
        data: [[25, 0], [50, 100], [80, 100], [80, 80], [50, 0], [25, 0]],
        lineColor: 'red',
        lineWidth: 1,
        enableMouseTracking: false,
        marker: {
          enabled: false,
          status: {
            hover: {
              enabled: false
            }
          }
        }
      },
      {
        name: '机温出力限制区',
        type: 'line',
        data: [[15, 0], [15, 100], [100, 100], [100, 80], [60, 0], [15, 0]],
        lineWidth: 1,
        lineColor: '#4F94CD',
        enableMouseTracking: false,
        marker: {
          enabled: false,
          status: {
            hover: {
              enabled: false
            }
          }
        }
      },  
      {
        name: '运行点',
        type: 'scatter',
        color: Highcharts.getOptions().colors[1],
        data: [[65, 90], [85, 85], [55, 70], [50, 75], [66, 85], [57, 84], [45, 85], [55, 85], [60, 99], [66, 120], [55, 102], [56, 108], [67, 101], [50, 100], [70, 100], [69, 102], [67, 102.2], [61, 80], [54, 95], [65, 95], [59, 92], [58, 91], [58, 94]],
        marker:{
          radius: 2
        },
        symbol: 'circle'
      }
      ],
      credits: {
        enabled: false},
      tooltip: {
        // headerFormat: '<b>{series.name}</b><br>',
        headerFormat: '',
        pointFormat: '{point.x} 机组, {point.y} 效率'
      }
    }
  }
}
